本篇文章目錄

1. 前言
2. 專案成果總覽
3. GitHub Source Code 和網站連結
4. 心得感想

一、 前言

在經過了30天的努力後，這個系列終於來到了結尾。
作為完賽篇，今天我們將進行最完整的專案成果總覽，提供大家 GitHub Source Code 和網站連結，並分享這 30 天製作這個專案的心得反思。

二、 專案成果總覽

專案架構

med-toolbox/
├── index.html               # 網頁主要骨架 (SPA 結構，包含 4 大 Tool Section)
├── css/
│   ├── style.css            # 全局 Reset、CSS 變數系統與主佈局
│   └── components.css       # 通用元件樣式 (按鈕, 表格, Badge 標籤, 列印專用樣式)
├── js/
│   ├── app.js               # 全局控制 (Tab 切換與無障礙綁定)
│   ├── tool1-calculator.js  # Tool 1 生理指標計算邏輯
│   ├── tool2-dosage.js      # Tool 2 兒童劑量換算邏輯
│   ├── tool3-schedule.js    # Tool 3 時間表生成、列印與LocalStorage 記憶
│   └── tool4-timer.js       # Tool 4 開瓶計時、自訂效期與 LocalStorage 記憶
└── README.md                # 專案說明文件

生理指標計算器

功能：輸入身高、體重和年齡，選擇性別和每週活動量，按下「開始計算」按鈕，計算器就能計算出你的 BMI 數值、基礎代謝率 (BMR) 和每日總熱量消耗 (TDEE)，並顯示不同顏色的警示標籤 (黃色體重過輕/綠色健康體位/紅色體重過重)。

兒童用藥劑量換算器

功能：輸入藥品標示上的成人單次標準劑量 (mg)，選擇換算要依年齡換算還是要依體重換算，按下「換算兒童劑量」按鈕，換算器就能換算出建議兒童單次劑量。

每日用藥時間表生成器

功能：輸入藥品名稱和備注，選擇服用時段，按下「加入時間表」按鈕，生成器就會自動生成當日四時段用藥檢視表。

特殊藥品開瓶倒數計時器

功能：輸入藥品/眼藥水名稱和效期天數，選擇開瓶日期，按下「新增追蹤項目」按鈕，追蹤的藥品和剩餘效期就會自動顯示在下方。

三、 GitHub Source Code 和網站連結

• GitHub 原始碼（Source Code）：
  https://github.com/Meei13/med-toolbox.git

• 線上體驗（Live Demo）：
  https://meei13.github.io/med-toolbox/

四、 心得感想

當按下第 30 天文章的「送出」按鈕那一刻，心中那股懸了整整一方面的緊繃感，終於化作滿滿的釋懷與感動。

我做到了！我真的獨立完成了 30 天不間斷的開發與發文挑戰！

回首這一個月來的點點滴滴，這不僅僅是一場寫作的馬拉松，更是一場對個人意志力、程式除錯耐性與專案架構邏輯的極限考驗。

老實說，我參賽前以為「每天寫點程式、發一篇文」應該不會太難。但真正進入參賽狀態後才發現，現實比想像中殘酷得多。

在繁忙的課業與生活之餘，每天還要額外分出一點時間來整理出一篇文章，真的不是一件簡單的事。有很多個夜晚，當大家已經準備休息時，我還在跟主控台裡的紅色報錯訊息死磕...

例如：

• 抓不到 DOM 節點的崩潰：為了排查一個 TypeError: Cannot read properties of null (reading 'value')，把每一個輸入框的 id 一個個對照、比對了很久。
• 無障礙語法的堅持：為了修正一個 Incorrect use of <label for> 警告，強迫自己重新翻閱規範，把整張表單的結構拆掉重組。
• 邏輯與介面的拔河：想要實現多時段用藥分派，又要確保 LocalStorage 畫面重繪不閃爍，寫出來的 code 刪刪改改，砍掉重練更是常態。

有好幾次，眼看著 midnight 截稿時間一分一秒逼近，螢幕上的功能卻還跳出 bug，那種心跳加速、手心冒汗的焦慮感，至今依然印象深刻。但每當想放棄時，一想到已經堅持了這麼多天，就告訴自己：「再多撐一下，一定能解出來！」

這次開發「醫藥數位健康工具箱」，我給自己的期許不只是「能用就好」，而是要打造出兼具臨床實用性與優雅 UX 的產品。也因為這個堅持，讓我對每一個工具的細節進行了無數次的微調：

• 防呆與資料安全的極致：從 Optional Chaining (?.) 的空值保護、confirm() 的二次確認對話框，到衛語句 (Guard Clauses) 的輸入攔截，我試圖堵住任何一個可能讓程式碼崩潰或讓使用者誤刪資料的漏洞。
• 原生 JavaScript 的純粹：不依賴任何大型框架或第三方套件，堅持用最純粹的 Vanilla JS 處理 Date 物件運算、DOM 繪製與 LocalStorage 同步，雖然開發過程更費工，但成果卻異常輕量、順暢。

這 30 天的鐵人賽，鍛鍊的不只是我的 JavaScript 實作能力，更重要的是培養了「遇到 bug 絕不逃避、冷靜定位原因、動手解決問題」的工程師思維。

感謝這 30 天堅持到底的自己，也感謝過程中所有關注與支持這個專案的朋友們。